<div class="form-group">
    <style>
        .tag-container{
            box-sizing: border-box;
        }
        .add_tag{
            border: 1px solid #ccc;
            padding: 5px 8px;cursor:pointer;
        }
        .add_tag:hover{
            background: #cacaca;
        }
        .del_tag{
            padding:0 6px;
            cursor: pointer;
        }
        .tag{
            margin: 4px 0;
        }
    </style>
    <label class="col-sm-2 control-label" for="{$config.name}">{$config.title}：</label>
    <div class=" col-sm-9 col-md-8 col-lg-6">

        <ul id="attrTab" class="nav nav-tabs">
            <volist name="config.tags" id="ctag">
                <li <eq name="i" value="1">class="active"</eq>><a href="#tagsTab{$key}" data-toggle="tab">{$ctag.title}</a></li>
            </volist>
        </ul>

        <div id="tagsContainer" class="tab-content">

            <volist name="config.tags" id="ctag">
                <div <eq name="i" value="1">class="tab-pane fade in active"<else/>class="tab-pane"</eq>  id="tagsTab{$key}" style="padding-top: 5px;">
                    <p><span class="add_tag" title="添加标签" data-field="{$ctag.field}" data-type="{$ctag.type}">+</span> {$ctag.desc}</p>
                    <div class="tag-container">
                        <volist name="tags" id="tag">
                            <eq name="tag.field" value="$ctag.field">
                                <div class="tag" data-tag-id="{$tag.id}" >
                                    <span class="del_tag" title="删除此标签">-</span>
                                    <switch name="ctag.type">
                                        <case value="color">
                                            <input type="color" name="tags[{$tag.id}][value]" class="tag-value" maxlength="30" value="{$tag.value}">
                                        </case>
                                        <case value="url">
                                            <input type="text" name="tags[{$tag.id}][value]" class="tag-value" maxlength="30" value="{$tag.value}">
                                        </case>
                                        <case value="number">
                                            <input type="number" name="tags[{$tag.id}][value]" class="tag-value" maxlength="30" value="{$tag.value}">
                                        </case>
                                        <case value="text">
                                            <input type="text" name="tags[{$tag.id}][value]" class="tag-value" maxlength="30" value="{$tag.value}">
                                        </case>
                                    </switch>
                                    <input type="text" name="tags[{$tag.id}][name]" placeholder="" value="{$tag.name}" maxlength="30">
                                    <input type="hidden" name="tags[{$tag.id}][field]" value="{$ctag.field}">
                                </div>
                            </eq>
                        </volist>
                    </div>
                </div>
            </volist>
        </div>
    </div>
    <script>
        $(function(){
            // 增加标签按钮
            $(document).on("click",".add_tag",function(){

                // 获取 标签类型 与 字段类型
                var type = $(this).data("type");
                var field = $(this).data("field");

                // 获取tag容器
                var container = $(this).parent("p").next(".tag-container");

                // 获取最大ID值
                var max_id = 0;
                $(".tag").each(function(i){
                    max_id = max_id>$(this).data("tag-id")?max_id:$(this).data("tag-id");
                });
                max_id++;


                // 构建元素
                var tag =
                        $('<div class="tag" data-tag-id="'+max_id+'">'+
                            '<span class="del_tag" title="删除此标签">-</span> '+
                            '<input type="'+type+'" name="tags['+max_id+'][value]" class="tag-value" maxlength="30"> '+
                            '<input type="text" name="tags['+max_id+'][name]" placeholder=""  maxlength="30">'+
                            '<input type="hidden" name="tags['+max_id+'][field]" value="'+field+'">'+
                        '</div>'
                );


                // 追加元素
                $(container).append(tag);


            });

            // 删除标签按钮
            $(document).on("click",".del_tag",function(){
                $(this).parent(".tag").remove();

            });
        });
    </script>
</div>
